@font-face {
    font-family: 'icomoon';
    src: url('fonts/icomoon.eot?f97f43');
    src: url('fonts/icomoon.eot?f97f43#iefix') format('embedded-opentype'),
        url('fonts/icomoon.ttf?f97f43') format('truetype'),
        url('fonts/icomoon.woff?f97f43') format('woff'),
        url('fonts/icomoon.svg?f97f43#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
@media screen and (max-width:755px){
     #photo img{
        width: 470px;
        height: 215px;
     }
}
@media sscreen and (max-width:965px){
    #photo img {
        width: 531px;
        height: 243px;
    }
}
@media screen and (max-width:1174){
    #photo img{
        width: 729px;
        height: 334px;
    }
}
* {
    margin: 0;
    padding: 0;
}

body {
    background-color: rgb(246, 246, 246);
}

/* 搜索模块 */
header {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   z-index: 1;
    background-color: rgb(246, 152, 52);
    height: 90px;
    box-shadow: 2px 2px 2px 2px rgba(180, 115, 2, 0.2);
}

.logo {
    width: 90%;
}

header [class^=col] {
    display: grid;
    grid-template-rows: 90px;
    align-items: center;
    justify-items: center;
}

#search {
    width: 70%;
    display: flex;
    justify-content: flex-start;
}

/* 导航模块 */
nav [class^=col] {
    display: grid;
    grid-template-rows: 50px;
    justify-items: center;
    justify-content: space-around;
    line-height: 50px;
    border-right: 1px solid gray;
}

.nav-row a {
    font-family: icomoon;
}

nav [class^=col]:last-child {
    border-right: 1px solid transparent;
    display: flex;
    flex-direction: row;
}

nav {
    margin-top: 92px;
    border-radius: 10px;
    background-color: rgb(255, 179, 97);
    box-shadow: 2px 2px 1px 1px rgba(181, 181, 181, 0.5);
}

.nav-row a {
    font-size: larger;
    text-decoration: none;
    color: rgb(70, 70, 70);

}
.menu{
    text-align: center;
    width: 100%;
   height: 50px;
   position: relative;
   font-size: 17px;
   overflow: hidden;
}
.menu:hover{
    overflow: visible;
    z-index: 1;
    cursor: pointer;
}
.drop{
    background: rgb(255, 248, 248);
    width: 100%;
    height: 50px;
    text-align: center;
    overflow: hidden;
}
.drop:hover{
    background-color: rgb(255, 179, 97);
    box-shadow: 2px 2px 2px 2px rgba(111, 111, 111, 0.3);
}
/* 中心模块 */
article {
    display: grid;
    margin-top: 4px;
}

#sort {
    background-color: rgb(255, 235, 213);
    height: 900px;
    grid-template-columns: 3fr
}

#sort li {
    height: 25px;
    list-style: none;
    text-align: center;
    font-size: 16px;
}

#sort li:first-child {
    margin-top: 10px;
}

#sort .line {
    color: rgb(188, 188, 188);
}

#sort .subj:hover {
    cursor: pointer;
    transform: scale(1.2);
}
.shengming{
    position: fixed;
    bottom: 20px;
    color: rgb(156, 156, 156);
}

#article-right {
    grid-template-columns: 9fr;
    height: auto;
    padding: 1px;
}


/* 图片轮播 */
.article-rtop .container{
    height: 400px;
    overflow: hidden;
}
#photo{
    max-width: 100%;
    padding-bottom: 45.87%;
    animation: switch 7s ease-out infinite;
}
#photo img{
    float: left;
}
@keyframes switch {
    0%,25% {
        margin-top: 0;
    }
    35%,60%{
        margin-top: -400px;
    }
    70%,100%{
        margin-top: -800px;
    }
}
/* 图书展示 */
.article-rbottom {
    display: grid;
    justify-content: center;
    justify-items: center;
    background-color: rgb(241, 241, 241);
}

.article-rbottom img {
    width: auto;
}

/* 底部 */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
}

footer [class^=col] {
    display: grid;
    grid-template-rows: 50px;
    background-color: rgb(246, 152, 52);
    justify-items: center;
    line-height: 50px;
    border: 1px solid rgb(237, 237, 237);
    font-size: 16px;
}

footer a {
    text-decoration: none;
    color: black;
}